//引入Count的UI组件
// import CountUI from '../../components/Count';

import React, { Component } from 'react';

//引入action
import {
    createIncrementAction,
    createDecrementAction,
    createIncrementAsyncAction
} from '../../redux/actions/count'


//引入connect用于连接UI组件与redux
import { connect } from 'react-redux';


//定义UI组件
class Count extends Component {

    state = { carName: '奔驰c63' }

    //加法
    increment = () => {
        const { value } = this.selectNumber;
        this.props.jia(1 * value);
    }


    //减法
    decrement = () => {
        const { value } = this.selectNumber;
        this.props.jian(1 * value);


    }

    //奇数再加
    incrementIfOdd = () => {
        const { value } = this.selectNumber;
        if (this.props.count % 2 !== 0) {
            this.props.jia(1 * value)
        }

    }

    incrementAsnyc = () => {
        const { value } = this.selectNumber;
        this.props.jiaAsync(1 * value, 500);


    }

    render() {
        // console.log('UI组件接收到的props是', this.props);
        return (
            <div>
                <h2>我是Count组件, 下方组件总人数为:{this.props.renshu}</h2>
                <h4>当前求和为: {this.props.count}</h4>
                <select ref={c => this.selectNumber = c}>
                    <option value='1'>1</option>
                    <option value='2'>2</option>
                    <option value='3'>3</option>

                </select>&nbsp;
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>
                <button onClick={this.incrementAsnyc}>异步加</button>
            </div>
        )
    }
}






//映射状态
// const mapStateToProps = state => ({ count: state })


//映射操作状态的方法
// const mapDispatchToProps = dispatch => ({
//     jia: number => dispatch(createIncrementAction(number)),
//     jian: number => dispatch(createDecrementAction(number)),
//     jiaAsync: (number, time) => dispatch(createIncrementAsyncAction(number, time)),
// })

//使用connect()()创建并暴露一个Count的容器组件
export default connect(
    state => ({ count: state.he, renshu: state.rens.length }),

    //mapDispatchToProps的一般写法
    // dispatch => ({
    //     jia: number => dispatch(createIncrementAction(number)),
    //     jian: number => dispatch(createDecrementAction(number)),
    //     jiaAsync: (number, time) => dispatch(createIncrementAsyncAction(number, time)),
    // })

    //mapDispatchToProps的简写
    {
        jia: createIncrementAction,
        jian: createDecrementAction,
        jiaAsync: createIncrementAsyncAction,
    }
)(Count);


